<template>
    <div>
        <!--列表-->
         <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!--搜索-->
        <div style="margin-top:15px"></div>
        <el-button size="small" type="danger" icon="el-icon-plus" @click="add">添加</el-button>
        <div style="margin-top:15px"></div>
        <el-alert
            title="目录下有关联商品，只可以修改添加，不可以删除！"
            type="info"
            effect="dark">
        </el-alert>
        <el-table size="small" :data="listData" border highlight-current-row v-loading="loading"  element-loading-text="拼命加载中" style="width: 100%;">
            
            <el-table-column
            width="200"
              prop="cid"
              label="主键">
               <template slot-scope="scope">
                       <span style="font-size:14px">{{scope.row.cid}}</span>
              </template>
            </el-table-column>
            

          

          <el-table-column
              prop="cname"
              label="目录名称">
               <template slot-scope="scope">
                       <span style="color:red">{{scope.row.cname}}</span>
              </template>
          </el-table-column>

         

          <el-table-column
            width="200px"
            label="操作"
            >
            <template slot-scope="scope">
                <el-button  @click="editClick(scope.row)" type="success" size="small"><i class="el-icon-edit"/>编辑</el-button>
            </template>
        </el-table-column>


           
    </el-table>

    <!--弹窗-->
    <el-dialog :title="title==1?'添加':'编辑'" :visible.sync="Visible" width="30%">
      
      
      <el-form label-width="80px" :model="Form" >
        
        <el-form-item label="目录名称" >
          <el-input size="small"  clearable v-model="Form.cname" auto-complete="off" placeholder="描述"></el-input>
        </el-form-item>

        
      </el-form>
      <div slot="footer" class="dialog-footer">
        
        <el-button   type="primary" :loading="loading2" class="title" @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>

    </div>
</template>
<script>
export default {
    data() {
        return {
            listData:[],
            loading:false,
            loading2:false,
            Form:{
                cname:"",
                cid:""
            },
            Visible:false,
            title:1

        }
    },
    created(){
        this.getList();
    },
    methods:{
         getList(){         //获取数据
            this.loading=true;
            this.$api.get("/category/getList","",Response=>{
                  this.listData = Response.data.data;
            })
            setTimeout(()=>{
                this.loading =false
            },500)
         },
         submitForm(){
                this.$confirm('确定要保存数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                            this.loading2 = true
                            this.$api.post("/category/updateCatalogByAdmin",this.Form,Response=>{
                                  if(Response.data.code == 200){
                                       this.$message.success("保存成功")
                                  }else{
                                      this.$message.error("系统出错")
                                  }
                            })
                            setTimeout(()=>{
                                this.loading2 = false
                                this.Visible = false
                                this.getList();
                            },500)    
                    })
         },
         editClick(datas){    //编辑按键
         this.Visible =true;
                 this.title =2
                 
                 this.Form.cname=datas.cname,
                 this.Form.cid=datas.cid;

         },
         add(){
             this.title =1
             this.clear();
             this.Visible=true;
         },
         clear(){
            
             this.Form.cname = "",
             this.Form.cid=""
         }
    }
}
</script>
<style scoped>

</style>